<template>
  <div class="page-wrapper">
    <div class="wrapper">
      <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        @submit="onSubmit"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <a-form-item
          label="账户"
          name="username"
          :rules="[{ required: true, message: '请输入账户' }]"
        >
          <a-flex>
            <a-input v-model:value="formState.username" />
            <a-button @click="onQuery">查询</a-button>
          </a-flex>
        </a-form-item>

        <a-form-item name="avatar" :rules="[{ required: true, message: '请上传头像' }]">
          <a-upload
            v-model:file-list="formState.avatar"
            action="#"
            list-type="picture"
            :maxCount="1"
            :customRequest="onUpload"
          >
            <a-button>
              <upload-outlined></upload-outlined>
              上传头像
            </a-button>
          </a-upload>
        </a-form-item>

        <a-form-item class="btn-item">
          <a-button class="submit-btn" type="primary" danger html-type="submit">保存</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script setup>
import { reactive } from 'vue'
import { UploadOutlined } from '@ant-design/icons-vue'
import request from '@/utils/request'
// import { message } from 'ant-design-vue'
// const [messageApi, contextHolder] = message.useMessage()

const formState = reactive({
  username: '',
  avatar: [],
})

const onQuery = async () => {
  try {
    const res = await request.get('/app/user/queryUserAvatar?username=' + formState.username)
    formState.avatar = [
      {
        uid: Math.random().toString(),
        name: res.result,
        status: 'done',
        url: '/jeecg-boot/sys/common/static/' + res.result,
        thumbUrl: '/jeecg-boot/sys/common/static/' + res.result,
      },
    ]
  } catch (error) {}
}

const onUpload = async ({ file }) => {
  try {
    const formData = new FormData()
    formData.append('file', file)
    const res = await request.post('/sys/common/upload', formData)
    formState.avatar = [
      {
        uid: Math.random().toString(),
        name: res.message,
        status: 'done',
        url: '/jeecg-boot/sys/common/static/' + res.message,
        thumbUrl: '/jeecg-boot/sys/common/static/' + res.message,
      },
    ]
  } catch (error) {}
}

const onSubmit = (e) => {
  console.log(e)
}

const onFinish = async (values) => {
  console.log(values)
  try {
    await request.post('/app/user/authentication', {
      userName: values.username,
      path: values.avatar[0].name,
    })
    // messageApi.success('保存成功')
  } catch (error) {}
}

const onFinishFailed = (errorInfo) => {
  console.log('Failed:', errorInfo)
}
</script>

<style lang="less" scoped>
.page-wrapper {
  height: 100%;
  background-color: #f4f4f4;
  overflow-y: auto;
}
.page-wrapper::-webkit-scrollbar {
  display: none;
}
.wrapper {
  padding: 16px;
}
::v-deep .ant-upload-list {
  padding-top: 8px;
  .ant-upload-list-item-container {
    height: 300px !important;
    .ant-upload-list-item {
      height: 300px !important;
      margin-top: 0;
      .ant-upload-list-item-thumbnail {
        width: calc(100% - 20px);
        height: calc(100% - 10px);
        .ant-upload-list-item-image {
          object-fit: cover;
        }
      }
      .ant-upload-list-item-name {
        display: none;
      }
      .ant-upload-list-item-actions {
      }
    }
  }
}
.btn-item {
  position: fixed;
  bottom: 0;
  left: 16px;
  right: 16px;
  margin: 0 auto 36px;
  .submit-btn {
    width: 100%;
  }
}
</style>
